<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta name="Generator" content="YONGDA v1.0" />
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <meta name="Keywords" content="" />
    <meta name="Description" content="" />

    <title>购物车 - 熊大书城</title>

    <link href="/style/blue/main.css" rel="stylesheet" type="text/css" />
    <!-- Add the jQuery library -->
    <script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
    <style type="text/css">
        table {border:1px solid #dddddd; border-collapse: collapse; width:99%; margin:auto;}
        td {border:1px solid #dddddd;}
        #consignee_addr {width:450px;}
    </style>
</head>
<body>

<!--<div class="block clearfix" style="position: relative; height: 98px;">-->
<!--    &lt;!&ndash; Your existing navigation bar &ndash;&gt;-->
<!--</div>-->

<div class="blank"></div>
<div class="block">
    <div class="flowBox">
        <h6><span>商品列表</span></h6>
        <form id="formCart">
            <table id="cartTable" cellpadding="5" cellspacing="1">

                <tbody>
                <tr>
                    <th>商品名称</th>
                    <th>本店价</th>
                    <th>购买数量</th>
                    <th>小计</th>
                    <th>操作</th>
                </tr>
                <tr>
                    <td align="center">
                        <a href="#" target="_blank"><img style="width: 80px; height: 80px;" src="/style/blue/images/22722790-1_l.jpg" title="JavaScript" /></a><br />
                        <a href="#" target="_blank" class="f6">JavaScript</a>
                    </td>
                    <td align="right">￥40.00元</td>
                    <td align="right">
                        <!-- Add a unique identifier to the input field -->
                        <input name="goods_number[43]" id="goods_number_43" value="1" size="4" class="inputBg" style="text-align: center;" onkeydown="showdiv(this)" type="text" />
                    </td>
                    <td align="right">￥40.00元</td>
                    <td align="center">
                        <!-- Add a data attribute to store the book ID -->
                        <a href="#" class="f6 delete-button" data-book-id="43">删除</a>
                    </td>
                </tr>
                </tbody>
            </table>
            <table cellpadding="5" cellspacing="1">
                <tbody>
                <tr>
                    <td id="totalAmount"> 总计:￥40.00元   </td>
                    <td align="right">
                        <input value="清空购物车" class="bnt_blue_1 clear-cart-button" type="button" />
                    </td>
                </tr>
                </tbody>
            </table>
            <input name="step" value="update_cart" type="hidden" />
        </form>
        <table cellpadding="5" cellspacing="0" width="99%">
            <tbody>
            <tr>
                <td><a href="/index.html"><img src="/style/blue/images/continue.gif" alt="continue" /></a></td>
                <td align="right"><a href="javascript:calc();"><img src="/style/blue/images/checkout.gif" alt="checkout" /></a></td>
            </tr>
            </tbody>
        </table>
    </div>
    <div class="blank"></div>
    <div class="blank5"></div>
</div>
<div class="blank"></div>
<iframe src="footer.html" frameborder="0" scrolling="no" width="100%" height="300"></iframe>

<script>
    $(document).ready(function() {
        $.get("/book/getCartData", function(data) {
            $("#cartTable tbody").empty();

            // 添加第一个tr
            $("#cartTable tbody").append(
                "<tr>" +
                "<th>商品名称</th>" +
                "<th>本店价</th>" +
                "<th>购买数量</th>" +
                "<th>小计</th>" +
                "<th>操作</th>" +
                "</tr>"
            );

            var totalAmount = 0;

            // 添加其他tr
            $.each(data, function(index, item) {
                console.log(item);
                console.log(data);

                var subTotal = item.price * item.quantity;
                totalAmount += subTotal;

                $("#cartTable tbody").append(
                    "<tr>" +
                    "<td align='center'><a href='#' target='_blank'><img style='width: 80px; height: 80px;' src='" + "/style/blue/images/" + item.imageB + "' title='" + item.bname + "' /></a><br />" +
                    "<a href='#' target='_blank' class='f6'>" + item.bname + "</a></td>" +
                    "<td align='right'>￥" + item.price + "元</td>" +
                    "<td align='right'><input name='goods_number[" + item.cartItemId + "]' value='" + item.quantity + "' size='4' class='inputBg' style='text-align: center;' onkeydown='showdiv(this)' type='text' /></td>" +
                    "<td align='right'>￥" + subTotal + "元</td>" +
                    "<td align='center'><a href='#' class='f6 delete-button'  data-cart-item-id='" + item.cartItemId + "'>删除</a></td>" +
                    "</tr>"
                );
            });

            $("#totalAmount").text(" 总计:￥" + totalAmount.toFixed(2) + "元");
        });

        $(document).on("click", ".delete-button", function() {
            alert("确定删除?");
            var cartItemId = $(this).data("cart-item-id");
            $.post("/book/removeFromCart", { cartItemId: cartItemId }, function(data) {
                alert("删除成功");
                window.location = "/common/cart.html";
            });
        });

        // $(".clear-cart-button").click(function() {
        //     $.post("/book/clearCart", function(data) {
        //         console.log(data);
        //     });
        // });

        // 通过事件委托给动态生成的.goodsItem元素绑定点击事件   为什么不能使用$(".clear-cart-button").click这种防守
        $(document).on("click", ".clear-cart-button", function() {
            alert("确定清空购物车数据?");
            $.post("/book/clearCart", function(data) {
                alert("删除成功");
                window.location.href = "/common/cart.html";
            });
        });

    });


</script>


</body>
</html>
